import React, { Component } from "react";

class App extends Component {
  state = {
    textValue: "",
    areaValue: "",
    selectValue: "",
    checkedValue: false,
    boxValue: [],
  };

  handleChange1 = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };

  handleChange2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };

  handleChange3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };

  handleChange4 = (e) => {
    this.setState({
      checkedValue: e.target.checked,
    });
  };

  handleChange5 = (e) => {
    // this.setState((prevState) => {
    //   return {
    //     boxValue: prevState.boxValue.concat(e.target.value),
    //   };
    // });
    if (this.state.boxValue.includes(e.target.value)) {
      this.setState((prevState) => {
        return {
          boxValue: prevState.boxValue.filter(
            (item) => item !== e.target.value
          ),
        };
      });
    } else {
      this.setState((prevState) => {
        return {
          boxValue: prevState.boxValue.concat(e.target.value),
        };
      });
    }
  };

  handleClick = () => {
    console.log("textValue:", this.state.textValue);
    console.log("areaValue:", this.state.areaValue);
    console.log("selectValue:", this.state.selectValue);
    console.log("checkedValue:", this.state.checkedValue);
    console.log("boxValue:", this.state.boxValue);
  };

  render() {
    return (
      <>
        <h2>表单控件3</h2>
        <h5>普通输入框</h5>
        <input
          type="text"
          value={this.state.textValue}
          onChange={this.handleChange1}
        />
        <hr />
        <h5>多行文本框</h5>
        <textarea
          value={this.state.areaValue}
          onChange={this.handleChange2}
        ></textarea>
        <hr />
        <h5>下拉框</h5>
        <select value={this.state.selectValue} onChange={this.handleChange3}>
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">未知</option>
        </select>
        <hr />
        <h5>单选框</h5>
        <input
          type="radio"
          checked={this.state.checkedValue}
          onChange={this.handleChange4}
        />
        <hr />
        <h5>多选框</h5>
        <input
          type="checkbox"
          name="likes"
          value="sing"
          onChange={this.handleChange5}
        />
        唱
        <input
          type="checkbox"
          name="likes"
          value="dance"
          onChange={this.handleChange5}
        />
        跳
        <input
          type="checkbox"
          name="likes"
          value="basketball"
          onChange={this.handleChange5}
        />
        篮球
        <hr />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
